<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>
  <title>Thrive Mobile Application</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>  

  <!--- Some jquery stuff --->
  <link rel="stylesheet" href="../../scripts/jquery.mobile-1.0.1/jquery.mobile-1.0.1.min.css" type="text/css" />
  <link rel="stylesheet" href="../../scripts/jquery.mobile-1.0.1/thrive-theme.css" type="text/css">
  <script src="../../scripts/jquery.mobile-1.0.1/jquery.js" type="text/javascript"></script>
  <script src="../../scripts/jquery.mobile-1.0.1/jquery.mobile-1.0.1.min.js" type="text/javascript"></script>

  <link rel="stylesheet" href="../../css/style.css" type="text/css" />
  
</head>

<body>

	<div id="gatherFall" data-role="page" data-theme="a">
    
    	<script type="text/javascript">		
		
			var fallCtx;
			var fallFruits;
			var fallDrawID;
			var fallWidth;
			var fallHeight;
			var fallImageSize = 30;

			var fruitX = new Array();
			var fruitY = new Array();
			var fruitDX = new Array();
			var fruitDY = new Array();
			var fruitImage = new Array();
		
			var fallBasketBack = new Image();
			var fallBasketFore = new Image();
		
			$("#gatherFall").live('pageinit', function() {
				
				initFall(10);
			});
			
			/*$("#gatherFall").live( 'pagehide',function(){

				//fruitX = [];
				//fruitY = [];
				//fruitDX = [];
				//fruitDY = [];
				//fruitImage = [];
				
				//clearInterval(fallDraw);
			});*/
			
			function initFall(num) {
				$('#fallCanvas')[0].width = window.innerWidth;
				$('#fallCanvas')[0].height = window.innerHeight - 148;
				fallCtx = $('#fallCanvas')[0].getContext("2d");
				fallWidth = $('#fallCanvas')[0].width;
				fallHeight = $('#fallCanvas')[0].height;
				
				var size = Math.min(fallWidth, fallHeight);
				fallImageSize = Math.floor(size / 5);
				
				//alert( fallWidth + " " + fallHeight);
				fallBasketBack.src = "thriveapp_basket_back.png";
				fallBasketFore.src = "thriveapp_basket_fore.png";

				
				fallFruits = num;		
				for (i = 0; i < fallFruits; i++) {
					makeFruit(i);
				}
				
				setInterval(fallDraw, 10);
    		}
			
			$(window).resize(function() {
				$('#fallCanvas')[0].width = window.innerWidth;
				$('#fallCanvas')[0].height = window.innerHeight - 148;
				fallCtx = $('#fallCanvas')[0].getContext("2d");
				fallWidth = $('#fallCanvas')[0].width;
				fallHeight = $('#fallCanvas')[0].height;
				
				var size = Math.min(fallWidth, fallHeight);
				fallImageSize = Math.floor(size / 5);
				
				drawCanvas();
				$("#fallCanvas").trigger("create");
			});
			
			$('#fallContent').bind( 'vmousedown', function( e ) {
				e.preventDefault();
				var fallX = e.pageX - $("#fallCanvas").offset().left;
				var fallY = e.pageY - $("#fallCanvas").offset().top;
			
				//alert( 'You tapped at ' + fallX + ' and ' + fallY + '!' );
				tapFruit(fallX, fallY);
				return false;
			} );  
		
		
			function makeFruit(num) {
				fruitX[num] = fallImageSize*Math.floor(Math.random()*8);
				fruitY[num] = - fallImageSize*Math.floor(Math.random()*3);
				fruitDX[num] = 0;
				fruitDY[num] = 1;
				fruitImage[num] = new Image();
				fruitImage[num].src = "thriveapp_fruit_" + (Math.floor(Math.random()*6)) + ".png";
			}
			
			function tapFruit(fallX, fallY) {
			//alert( 'You tapped at ' + fallX + ' and ' + fallY + '!' );
			
				for (i = 0; i < fallFruits; i++) {
					if ((fruitX[i] <= fallX) && (fallX <= fruitX[i] + fallImageSize)) {
						if ((fruitY[i] <= fallY) && (fallY <= fruitY[i] + fallImageSize)) {
							//alert( 'You tapped at ' + fallX + ' and ' + fallY + '!' );
							fruitDX[i] = (fallWidth - fruitX[i]) / 60;
							fruitDY[i] = 0;
						}
					}
				}
			
			}

		    function fallDraw() {
				fallCtx.clearRect(0,0,fallWidth,fallHeight);
				fallCtx.drawImage(fallBasketBack, fallWidth - fallImageSize*2, fallHeight - fallImageSize, fallImageSize*2, fallImageSize);
				
				for (i = 0; i < fallFruits; i++) {
					fallCtx.drawImage(fruitImage[i],fruitX[i],fruitY[i],fallImageSize,fallImageSize);
					fruitX[i] += fruitDX[i];
					if (fruitX[i] > (fallWidth - fallImageSize*1.5)) {
						fruitDX[i] = 0;
						fruitDY[i] = 1;
					}
		
					fruitY[i] += fruitDY[i];
					if (fruitY[i] > fallHeight) {
						if (fruitX[i] >= (fallWidth - fallImageSize*2) ) {
							fruitDX[i] = 0;
							fruitDY[i] = 0;
						} else {
							fruitY[i] = -fallImageSize;
							fruitX[i] = fallImageSize*Math.floor(Math.random()*8);
						}
					}
				}
				
				fallCtx.drawImage(fallBasketFore, fallWidth - fallImageSize*2, fallHeight - fallImageSize, fallImageSize*2, fallImageSize);
    		}
			
		</script>
    
        <div data-role="header" data-theme="a">
			<a href="gather.html" data-role="button" data-icon="arrow-l">Gather</a>
			<h1>Gather</h1>
		</div>
        
        <div data-role="content" id="fallContent" data-theme="a">
			<canvas id="fallCanvas"></canvas>       
		</div>
    
		<a id="submit_gatherfall" type="submit" href="gatherBasket.html">Basket</a>
	
	</div>
</body>

</html>
